<script setup>
import { reactive, watch } from 'vue'

const _props = defineProps({
  content: {
    type: Object,
    default: () => {}
  }
})

const detail = reactive({
  alias: '',
  smallheadimgurl: '',
  nickname: '',
  province: '',
  city: '',
  username: '',
  sex: ''
})

watch(
  () => _props.content,
  (newVal) => {
    Object.assign(detail, newVal)
  },
  { immediate: true }
)

function sex(val) {
  switch (val) {
    case '1':
      return '男'
    case '2':
      return '女'
    default:
      return '未知'
  }
}
</script>

<template>
  <div class="mx-2 my-2 overflow-hidden w-full">
    <el-text
      class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
      size="small"
      >微信名片</el-text
    >
    <div class="flex flex-row items-start justify-start mt-2">
      <div class="mr-2 mt-1 flex flex-row items-center justify-start">
        <el-avatar
          shape="square"
          class="bg-transparent"
          :size="40"
          fit="fill"
          :src="detail.smallheadimgurl"
        />
      </div>
      <div>
        <span class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap">{{
          detail.nickname
        }}</span>
        <el-text
          v-if="detail.alias"
          class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
          size="small"
          >微信号：{{ detail.alias }}</el-text
        >
        <el-text
          class="text-wrap w-full inline-block break-words hyphens-auto whitespace-pre-wrap"
          size="small"
          >{{ detail.province + detail.city || '未知地区' }} - {{ sex(detail.sex) }}</el-text
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-image-viewer__close) {
  width: 36px;
  height: 36px;
  margin-top: 20px;
}
</style>
